<template>
  <t-modal
    :title="parameter.text + '属性分类'"
    width="600px"
    :visible="visible"
    @cancel="closeModal()"
    @ok="okModal()"
    wrapClassName="add-extend-type-container"
    v-bind="footer"
    forceRender
  >
    <a-form-model ref="ruleForm" :model="form" :rules="rules">
      <a-form-model-item label="分类名称" prop="extendParamGroupName">
        <a-input
          v-model="form.extendParamGroupName"
          placeholder="请输入分类名称"
          :maxLength="30"
        ></a-input>
      </a-form-model-item>
    </a-form-model>
  </t-modal>
</template>

<script>
import {
  addElementExtendParamGroup,
  updateElementExtendParamGroup,
} from "@/api/bim";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    parameter: {
      type: Object,
      default() {
        return {};
      },
    },
    footer: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      form: {
        dataSetId: "",
        elementIntId: "",
        extendParamGroupName: "",
      },
      rules: {
        extendParamGroupName: [
          {
            required: true,
            message: "请输入分类名称",
          },
        ],
      },
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          let { text, dataSetId, elemId } = this.parameter;
          this.form.dataSetId = dataSetId;
          this.form.elementIntId = elemId;
          if (text == "编辑") {
            let { extendParamGroupId, extendParamGroupName } = this.parameter;
            this.form.extendParamGroupId = extendParamGroupId;
            this.form.extendParamGroupName = extendParamGroupName;
          }
        }
      },
      immediate: true,
    },
  },
  methods: {
    addElementExtendParamGroup,
    updateElementExtendParamGroup,
    okModal() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          let { extendParamGroupId } = this.parameter;
          let path = "";
          //编辑
          if (extendParamGroupId) {
            path = "updateElementExtendParamGroup";
          } else {
            //新增
            path = "addElementExtendParamGroup";
          }
          this[path](this.form)
            .then((res) => {
              if (res.statusCode === 200 || res === 1) {
                this.$message.success("操作成功", 1.5);
                this.resetForm();
                this.$emit("ok", res);
              } else {
                this.$message.error(res?.message ?? "操作失败");
              }
            })
            .catch((_) => {});
        }
      });
    },
    //重置表单
    resetForm() {
      this.form = {
        dataSetId: "",
        elementIntId: "",
        extendParamGroupName: "",
      };
      this.$refs.ruleForm.resetFields();
    },
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-extend-type-container {
  .curve-modal-body {
    max-height: 700px;
    overflow: auto;
  }
  .ant-form-item {
    display: flex;
    .ant-form-item-label {
      flex-shrink: 0;
      width: 100px;
    }
    .ant-form-item-control-wrapper {
      flex: 1;
    }
  }
}
</style>
